<!--  -->
<template lang="html">
	<mu-dialog title="重置密码" :open.sync="open" @close="closeAlertDialog" :esc-press-close="false" :overlay-close="false" width="600">
		<mu-form ref="form" :model="passwordForm" class="mu-demo-form">
			<mu-form-item label="旧密码" prop="oldPassword" :rules="newPasswordRules">
				<mu-text-field type="password" v-model="passwordForm.oldPassword" prop="oldPassword"></mu-text-field>
			</mu-form-item>
			<mu-form-item label="新密码" prop="newPassword" :rules="newPasswordRules">
				<mu-text-field type="password" v-model="passwordForm.newPassword" prop="newPassword"></mu-text-field>
			</mu-form-item>
			<mu-form-item label="再次输入新密码" prop="newPasswordAgain" :rules="newPasswordAgainRules">
				<mu-text-field type="password" v-model="passwordForm.newPasswordAgain" prop="newPasswordAgain"></mu-text-field>
			</mu-form-item>
			<mu-form-item>
				<mu-button color="primary" @click="submit">确认</mu-button>
				<mu-button @click="closeAlertDialog">取消</mu-button>
			</mu-form-item>
		</mu-form>
	</mu-dialog>
</template>

<script type="text/javascript">
	export default {
		// 不要忘记了 name 属性
		name: 'changePassword',
		// 组合其它组件
		extends: {},
		// 组件属性、变量
		props: { // 按字母顺序
			openAlert: {
				type: Boolean,
				default: false
			}
		},
		// 变量
		data() {
			return {
				open: this.openAlert,
				newPasswordRules: [{
						validate: (val) => !!val,
						message: '必须填写密码'
					},
					{
						validate: (val) => val.length >= 3 && val.length <= 16,
						message: '密码长度大于3小于16'
					}
				],
				newPasswordAgainRules: [{
						validate: (val) => !!val,
						message: '必须填写密码'
					},
					{
						validate: (val) => val.length >= 3 && val.length <= 16,
						message: '密码长度大于3小于16'
					},
					{
						validate: (val) => val == this.passwordForm.newPassword,
						message: '两次输入密码不一致！'
					}
				],
				passwordForm: {
					oldPassword: '',
					newPassword: '',
					newPasswordAgain: '',
				}
			}
		},
		computed: {},
		// 使用其它组件
		components: {},
		// 方法
		watch: {
			openAlert: {
				//注意：当观察的数据为对象或数组时，curVal和oldVal是相等的，因为这两个形参指向的是同一个数据对象
				handler(curVal, oldVal) {
					this.open = this.openAlert
				},
				deep: true
			}
		},
		methods: {
			closeAlertDialog() {
				this.clear();
				this.$emit('openAlert', false);

			},
			clear() {
				this.$refs.form.clear();
				this.passwordForm = {
					oldPassword: '',
					newPassword: '',
					newPasswordAgain: '',
				}
			},
			submit() {
				this.$refs.form.validate().then((result) => {
					if (result) {
						this.changePassword();
					}
				});
			},
			//修改密码
			changePassword() {

				//获取值
				let self = this;
				var oldPassword = this.passwordForm.oldPassword;
				var newPassword = this.passwordForm.newPassword;
				var newPasswordAgain = this.passwordForm.newPasswordAgain;
				var querystring = require("querystring");
				var params = querystring.stringify({
					oldPassword: oldPassword,
					newPassword: newPassword,
					newPasswordAgain: newPasswordAgain
				});
				self.$ajax({
						method: "post",
						url: "/user/changePassword",
						data: params
					})
					.then(function(res) {
						if (res.data.code == 200) {
							self.$toast.success("修改密码成功！");
							self.closeAlertDialog();
							self.$router.push({
								name: 'login'
							});
						} else {
							self.closeAlertDialog();
							self.$toast.error(res.data.content);

						}
					})
					.catch(function(err) {
						console.log(err);
						self.clear();

					});
			},
		},
		// 生命周期函数
		beforeCreate() {},
		mounted() {},
	};
</script>

<style scoped>

</style>
